import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'umi';
import { Modal, Form } from 'antd';
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
const codeMash = (props) => {
  const { visible = false, onClose, loading, list, setCode } = props;
  const { show, details = {} } = visible;
  const {} = details;
  const childRef = useRef();
  useEffect(() => {
    if (!show) {
      setSelectedRowKeys([]);
    }
  }, [show]);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const rowSelection = {
    onChange: (val, selectedRows, info) => {
      setSelectedRowKeys(selectedRows);
    },

    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),
  };
  const searchItems = [{ label: '关键词', name: 'keyword' }];
  const getColumns = [
    {
      title: '活码名称',
      dataIndex: 'codeName',
    },
    {
      title: '二维码中间的图片',
      
      dataIndex: 'qrcodeUrl',
      render: (e) => {
        return <PopImgShow url={e}></PopImgShow>;
      },
    },
    // {
    //   title: '创建时间',
    //   dataIndex: 'codeName',
    // },
    {
      title: '创建人',
      dataIndex: 'organizationAdminName',
    },
  ];
  const modalProps = {
    title: `选择群码列表`,
    width: 1200,
    visible: typeof visible === 'boolean' ? visible : show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    onOk: () => {
      if (selectedRowKeys.length > 0) {
        const { image } = selectedRowKeys[0];
        setCode(image);
        onClose();
      } else {
        onClose();
      }
    },
    // onOk: () => handleImage(selectedRowKeys),
  };

  return (
    <Modal {...modalProps} onCancel={onClose}>
      <TableDataBlock
        rowSelection={{
          type: 'radio',
          ...rowSelection,
        }}
        cRef={childRef}
        loading={loading}
        searchItems={searchItems}
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        dispatchType="weCom/fetchListChatCode"
        {...list}
      ></TableDataBlock>
    </Modal>
  );
};

export default connect(({ weCom, loading }) => ({
  list: weCom.chatCodeList,
  loading: loading.models.weCom,
}))(codeMash);
